<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>AudioContext</title>
		<script src="https://cdn.staticfile.org/jquery/2.2.3/jquery.js"></script>
	</head>
	<style>
		html,
		body {
			background-color: black;
			color: aliceblue;
			text-align: center;
		}
		#div0{
			height: 132px;
		}
		#slideTg{
			font-size:30px;
		}
		#cas{
			display: fixed;
			top:300px;
			left: 251px;
		}
		/* 下面的都是input file标签的美化 */
		.file {
			position: relative;
			display: inline-block;
			background: #D0EEFF;
			border: 1px solid #99D3F5;
			border-radius: 4px;
			padding: 4px 12px;
			overflow: hidden;
			color: #1E88C7;
			text-decoration: none;
			text-indent: 0;
			line-height: 20px;
		}

		.file input {
			position: absolute;
			font-size: 100px;
			right: 0;
			top: 0;
			opacity: 0;
		}

		.file:hover {
			background: #AADFFD;
			border-color: #78C3F3;
			color: #004974;
			text-decoration: none;
		}
	</style>
	<body>
		<div id='div0' ><!-- 设置height，不然滑动后下面的div会上移动 -->
			<div id='slideTg' title="点击隐藏/显示控件">︽</div>
			
			<div id='control'>
				<audio id='myAudio' preload="auto" controls>
					<source src="./audio/林俊杰《起风了》.Mp3" type="audio/mp3">
				</audio>
				<br/>
				<a href="javascript:;" class="file">选择文件
					<input type="file" id="file">
				</a>
				<span id='fileName'>林俊杰《起风了》.Mp3</span><!-- 文件名 -->
			</div>
		</div>
		

		<canvas id="cas" width="1000" height="500"></canvas>
		<script>
			$(function() {
				$("#slideTg").click(function() {
					$("#control").slideToggle("fast", function() {//jquery滑动
						if ($(this).is(":visible")) {
							$('#slideTg').text('︽');
						} else {
							$('#slideTg').text('︾');
							
						};

					});
				});
				const AudioContext = window.AudioContext || window.webkitAudioContext;
				let audioCtx;
				const myAudio = document.querySelector('#myAudio');

				$('#file').change(function() {//提交文件后
					console.log(this);
					let file = this.files[0];
					console.log(file.name);
					$('#fileName').text(file.name); //显示当前文件名
					let url = URL.createObjectURL(file);
					console.log(url);
					document.getElementById("myAudio").src = url;//加载到audio标签
				});

				myAudio.addEventListener('play', () => {//当开始播放
					audioCtx = new AudioContext();
					
					let source = audioCtx.createMediaElementSource(myAudio);//通过audio标签获取播放源
					let analyser = audioCtx.createAnalyser(); // 创建AnalyserNode 用于分析音频频谱的节点
					console.log(analyser);
					
					analyser.fftSize = 512; //表示（信号）样本的窗口大小，每格的宽度
					source.connect(analyser);
					analyser.connect(audioCtx.destination);//连接到destination才有声
			
					/**
					 * @param  {Number} x,起点x坐标
					 * @param  {Number} y,起点y坐标
					 * @param  {Number} dx,终点x坐标
					 * @param  {Number} dy,终点y坐标
					 * @return {Object} 返回一个线性 CanvasGradient对象,用于渐变
					 */
					const line = function(x, y, dx, dy) {
						let le = canvasCtx.createLinearGradient(x, 0, dx, 0);
						le.addColorStop(0, "#1b07ff");
						le.addColorStop(1, "#ff0000");
						return le;
					}
					let canvas = document.getElementById("cas");
					let canvasCtx = canvas.getContext("2d");
					
					let bufferLength = analyser.frequencyBinCount;
					console.log(bufferLength);
					
					let dataArray = new Uint8Array(bufferLength);
					console.log(dataArray);
					let width = 1000;
					let height = 500;
					function draw() {

						canvasCtx.clearRect(0, 0, width, height);
						drawVisual = requestAnimationFrame(draw);

						analyser.getByteFrequencyData(dataArray);//将数据放入数组，用来进行频谱的可视化绘制

						canvasCtx.fillStyle = line(0, height, width, -5);
						canvasCtx.fillRect(0, height, width, -5);

						let barWidth = (width / bufferLength) * 2.5;
						let barHeight;
						let x = 0;

						for (let i = 0; i < bufferLength; i++) {
							barHeight = dataArray[i];
							canvasCtx.fillRect(x, height, barWidth - 1, -barHeight - 5);
							x = x + barWidth;
						}
					};

					draw();
				});
			})

		</script>
	</body>
</html>
